<template>
	<div class="wordsDetailBox">
		<AppHeader title="单词跟读练习" :banAnimate="true" backgroundColor="#FFFFFF" titleColor="#000"
			@leftClickEvent="handleHeaderLeft()"></AppHeader>
		<div class="wordBox">
			<div class="progressBox">
				<div> <span class="active">{{(currentIndex+1)}}</span>/{{brushWordsList.resource.length}}</div>
				<div class="progress">
					<div class="current" :style="{width:((currentIndex+1)/brushWordsList.resource.length)*100+'%'}">
					</div>
				</div>
				<div class="practice-top-switch">
					<div :class="active === 2 ? 'active' : ''" @click="switchManual">自动</div>
					<div :class="active === 1 ? 'active' : ''" @click="switchManual">手动</div>
				</div>
			</div>
			<div class="image">
				<img :src="brushWordsList.resmain + wordsDetail.words_detail.wordPic" />
			</div>
			<div class="words">{{wordsDetail.words_detail.words}}</div>
			<div class="phoneticSymbol" v-if="wordsDetail.words_detail.symbol">[{{wordsDetail.words_detail.symbol}}]
			</div>
			<div class="explain">{{wordsDetail.words_detail.pretations}}</div>
			<div class="title" v-if="wordsDetail.words_detail.sentences">例句</div>
			<div class="exampleEn">{{wordsDetail.words_detail.sentences}}</div>
			<!-- <div class="exampleZh">我是两天前来这儿的</div> -->
		</div>
		<div class="practiceFractionBox">
			<div class="practiceFraction" v-if="recordingStatus=='ended'&&wordsDetail.sourceObj">
				<div :class="autoColor(wordsDetail.sourceObj.total_score)">
					{{wordsDetail.sourceObj.total_score}}分
				</div>
				<img src="@/assets/images/brushWords/scoreSrcRed.png"
					v-if="wordsDetail.sourceObj.total_score<60&&recordingStatus=='ended'" />
				<img src="@/assets/images/brushWords/scoreSrcYellow.png"
					v-if="(wordsDetail.sourceObj.total_score>60&&wordsDetail.sourceObj.total_score<80)&&recordingStatus=='ended'" />
				<img src="@/assets/images/brushWords/scoreSrcGreed.png"
					v-if="wordsDetail.sourceObj.total_score>80&&recordingStatus=='ended'" />
				<div class="context">
					<div class="label">完成度</div>
					<div :class="autoColor(wordsDetail.sourceObj.integrity_score)">
						{{wordsDetail.sourceObj.integrity_score }}
					</div>
				</div>
				<div class="context">
					<div class="label">流利度</div>
					<div :class="autoColor(wordsDetail.sourceObj.fluency_score)">
						{{wordsDetail.sourceObj.fluency_score }}
					</div>
				</div>
				<div class="context">
					<div class="label">准确度</div>
					<div :class="autoColor(wordsDetail.sourceObj.accuracy_score)">
						{{wordsDetail.sourceObj.accuracy_score}}
					</div>
				</div>
			</div>
		</div>
		<div class="practiceButton">
			<div class="wordsVoice" v-if="active == 1">
				<img @click="onlyPlayAudio" :src="playImgSrc" />
			</div>
			<!-- 弹性盒占位 -->

			<div class="wordsPlay" v-if="active == 1">
				<!-- @click="tapeClick" -->
				<div class="circle-container" v-if="recordingStatus == 'recording'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
				<img src="@/assets/phoneticPractice/录音@3x.png" v-if="recordingStatus != 'recording'"
					@click="tapeClick" />
			</div>
			<div class="myVoice" v-if="active == 1">
				<div class="circle-container1" v-if="wordsDetail.video">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"
						v-if="isPlayMyVideo">

						<circle :class="isPlayMyVideo ? 'circle1' : ''" cx="18" cy="18" r="16" fill="none"
							stroke="#0CB76C" stroke-width="1" stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img src="@/assets/phoneticPractice/播放@3x.png" style="position: absolute;" @click="playRecording" />
				</div>
				<div @click="completeClick1" class="practice-button-complete" v-if="recordingStatus == 'recording'">完成录音
				</div>
			</div>

			<div class="wordsPlay" v-if="active == 2">
				<div class="circle-container" v-if="recordingStatus == 'recording'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
				<div class="circle-container" v-if="recordingStatus == 'playing'">
					<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
						<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
							stroke-width="1" />
						<circle class="circle1" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
							stroke-dasharray="100.48" stroke-dashoffset="100.48" />
					</svg>
					<img :src="tapeImgSrc" style="position: absolute;" />
				</div>
			</div>
		</div>
		<!-- 填充盒子 -->
		<div class="fillBox"></div>
		<div class="practiceBottom" v-if="recordingStatus=='ended' && active === 1">
			<div @click="perWords" class="next">上一个</div>
			<!-- <div @click="againRead" class="again">重读</div> -->
			<div @click="nextWords" class="next">{{(currentIndex+1)==brushWordsList.resource.length?'完成':'下一个'}}</div>
		</div>
		<div class="practiceBottom" v-if="active === 2">
			<img class="practice-bottom-img" :src="bottomImgSrc" @click="automaticPlay" />
			<div @click="nextWords" class="next"
				v-if="recordingStatus=='ended' && (currentIndex+1)==brushWordsList.resource.length">完成</div>
		</div>
		<van-overlay :show="recordingStatus=='evaluating'">
			<div class="loading">
				<van-loading type="spinner" />
				<div class="text">评分中...</div>
			</div>
		</van-overlay>
		<Overlay :show="automaticOverlay">
			<div class="automaticOverlay">
				<div class="automaticOverlay-context" v-if="active == 1">手动模式可重读跟读，需要您自主操作进行跟读流程,确定切换吗?</div>
				<div class="automaticOverlay-context" v-if="active == 2">关闭手动模式将自动进行跟读流程，确认关闭吗?</div>
				<div class="automaticOverlay-button">
					<div @click="cancelSwitch">取消</div>
					<div @click="switchAutomatic">确定</div>
				</div>
			</div>
		</Overlay>
		<audio ref="audioElement" :src="audioSrc" @ended="playEnded"></audio>
		<audio ref="" src="@/assets/ding.mp3"></audio>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		ref,
		watch,
		reactive,
		nextTick,
		onMounted,
		onUnmounted,
		onBeforeUnmount
	} from "vue";
	import {
		Overlay,
		showToast,
	} from "vant";
	import {
		questions
	} from "@/api/writtenTest";


	import {
		useRouter,
		useRoute
	} from "vue-router";
	const route = useRoute();
	const router = useRouter();
	//返回上一页
	const handleHeaderLeft = () => {
		router.go(-1);
	};
	const active = ref(1)
	const automaticOverlay = ref(false)
	const currentIndex = ref(0) //当前单词索引
	const brushWordsList = ref({
		resource: []
	}) //练习单词列表
	const playImgSrc = ref('')
	const tapeImgSrc = ref('')
	const bottomImgSrc = ref('')
	const isPlayMyVideo = ref(false)
	//和获取单词详情信息
	import {
		saveWordsRecord,
		getWordsInfo,
		uploadFiles
	} from "@/api/brushWords.js";
	const wordsDetail = ref({
		words_detail: {}
	}) //单词详情信息
	import IatRecorder from '@/utils/iatRecorder'
	const recordingStatus = ref('notStarted') //录音状态 notStarted未开始  recording 录音中 ended 已结束 evaluating评测中
	const audioSrc = ref('') //音频资源文件
	const recordedSrc = ref('') //个人录音文件
	var time = 0
	const isPlayWords = ref(false) //是否正在播放单词
	const audioElement = ref(null)
	let recordedChunks = [];
	let iatRecorder;
	let mediaRecorder;
	let stream;
	let thisType
	let myAudio
	let sumbitObj = []
	// 重读
	const againRead = () => {
		wordsDetail.value.sourceObj = ''
		recordingStatus.value = 'notStarted'
		// playAudio()
		tapeClick()
	}

	//下一个单词
	const nextWords = async () => {
		// if (wordsDetail.value.words_detail.video == '') {
		// 	return showToast('请先朗读单词')
		// }

		if ((currentIndex.value + 1) == brushWordsList.value.resource.length) {
			//提交数据
			var params = {
				source_id: brushWordsList.value.source_id,
				question_type: 0,
				question_source_type: 5,
				use_time: time,
				total_score: 100,
				json: JSON.stringify(brushWordsList.value),
				answer_score_json: JSON.stringify(sumbitObj)
			}
			sessionStorage.setItem('params', JSON.stringify(params))
			router.push({
				path: '/phoneticSymbol/handHomework',
				query: {
					title: '单词跟读练习'
				}
			})
			return
		}
		const imgUrl = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = imgUrl.default
		const imgUrl1 = await import('@/assets/phoneticPractice/读@3x.png')
		tapeImgSrc.value = imgUrl1.default
		wordsDetail.value.video = ''
		currentIndex.value++
		isPlay.value = 'stop'
		recordedChunks = []
		recordingStatus.value = active.value === 2 ? 'playing' : 'notStarted'
		getWordsDetail()
	}

	const perWords = async () => {
		if (currentIndex.value === 0) {
			return showToast('已经是第一个了')
		}
		const imgUrl = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = imgUrl.default
		const imgUrl1 = await import('@/assets/phoneticPractice/读@3x.png')
		tapeImgSrc.value = imgUrl1.default
		currentIndex.value--
		wordsDetail.value.video = ''
		recordedChunks = []
		isPlay.value = 'stop'
		recordingStatus.value = active.value === 2 ? 'playing' : 'notStarted'
		getWordsDetail()
	}
	// 播放音频
	const playAudio = async (type) => {
		if (type == 'word') {
			audioSrc.value = wordsDetail.value.words_detail.wordFile
			isPlayWords.value = true
		}
		setTimeout(async () => {
			await audioElement.value.play()
		}, 1000)
	}
	let onlyAudio
	// 只播放音频不触发录音
	const onlyPlayAudio = async () => {
		console.log(recordingStatus.value)
		if (recordingStatus.value != 'ended') {
			return
		}
		// isOnlyPlayAudio.value = true
		const playModule = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = playModule.default
		onlyAudio = new Audio(wordsDetail.value.words_detail.wordFile);
		onlyAudio.play();
		onlyAudio.addEventListener('ended', async function() {
			const playModule = await import('@/assets/phoneticPractice/声音@3x.png')
			playImgSrc.value = playModule.default
		});
	}
	const isPlay = ref('stop') //自动播放状态
	const automaticPlay = async () => {
		if (isPlay.value == 'stop') {
			const bottomModule = await import('@/assets/phoneticPractice/形状@3x.png')
			bottomImgSrc.value = bottomModule.default
			isPlay.value = 'play'
			recordingStatus.value = 'notStarted'
			if (mediaRecorder) {
				stopRecording() //结束录音
			}
			if (iatRecorder) {
				iatRecorder.stop()
			}
			isPlayWords.value = false
			clearTimeout(videoTimeoutVal.value)
			videoTimeoutVal.value = null
			clearTimeout(sourceTimeoutVal.value)
			sourceTimeoutVal.value = null
		} else {
			const bottomModule = await import('@/assets/phoneticPractice/暂停@3x.png')
			bottomImgSrc.value = bottomModule.default
			const imgUrl1 = await import('@/assets/phoneticPractice/读@3x.png')
			tapeImgSrc.value = imgUrl1.default
			isPlay.value = 'stop'
			recordingStatus.value = 'playing'
			getWordsDetail()
		}
	}
	//播放结束
	const playEnded = async () => {
		isPlayMyVideo.value = false //结束自己的音频播放
		isPlayWords.value = false
		nextTick(async () => {
			if (isPlay.value === 'stop') {
				tapeClick()
			}
		})
	}
	const playRecording = async () => {
		myAudio = new Audio(wordsDetail.value.video);
		myAudio.play();
		isPlayMyVideo.value = true
		myAudio.addEventListener('ended', function() {
			isPlayMyVideo.value = false
		});
	}

	const cancelSwitch = async () => {
		automaticOverlay.value = false
		clearTimeout(videoTimeoutVal.value)
		videoTimeoutVal.value = null
		clearTimeout(sourceTimeoutVal.value)
		sourceTimeoutVal.value = null
		againRead()
	}
	const switchManual = async () => {
		automaticOverlay.value = true
		isPlay.value = 'stop'
		recordingStatus.value = 'notStarted'
		if (mediaRecorder) {
			stopRecording()
		}
		if (iatRecorder) {
			iatRecorder.stop()
		}
		clearTimeout(videoTimeoutVal.value)
		videoTimeoutVal.value = null
		clearTimeout(sourceTimeoutVal.value)
		sourceTimeoutVal.value = null
	}
	const switchAutomatic = async () => {
		if (active.value == 2) {
			recordingStatus.value = 'notStarted'
			active.value = 1
		} else {
			recordingStatus.value = 'playing'
			active.value = 2
		}
		if (mediaRecorder) {
			stopRecording() //结束录音
		}
		if (iatRecorder) {
			iatRecorder.stop()
		}
		isPlay.value = 'stop'
		automaticOverlay.value = false
		clearTimeout(videoTimeoutVal.value)
		clearTimeout(sourceTimeoutVal.value)
		const bottomModule = await import('@/assets/phoneticPractice/暂停@3x.png')
		bottomImgSrc.value = bottomModule.default
		const imgUrl1 = await import('@/assets/phoneticPractice/读@3x.png')
		tapeImgSrc.value = imgUrl1.default
		const imgUrl = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = imgUrl.default
		getWordsDetail()
	}
	const videoTimeoutVal = ref()
	//语音识别
	const tapeClick = async () => {
		startRecording() //录音
		recordingStatus.value = 'recording'
		const playModule = await import('@/assets/phoneticPractice/声音@3x.png')
		playImgSrc.value = playModule.default
		const playModule1 = await import('@/assets/images/brushWords/isRecording.gif')
		tapeImgSrc.value = playModule1.default
		iatRecorder.start()
		videoTimeoutVal.value = setTimeout(async () => {
			recordingStatus.value = 'evaluating'
			completeClick()
		}, 5000);
	}
	const completeClick1 = async () => {
		clearTimeout(videoTimeoutVal.value)
		completeClick()
	}
	const sourceTimeoutVal = ref()
	const completeTimeoutVal = ref()
	//完成识别
	const completeClick = async () => {
		recordingStatus.value = 'evaluating'
		const tapeModule = await import('@/assets/phoneticPractice/录音@3x.png')
		tapeImgSrc.value = tapeModule.default
		isPlay.value = 'play'
		iatRecorder.stop()
		stopRecording() //结束录音
		completeTimeoutVal.value = setTimeout(async () => {
			recordingStatus.value = 'ended'
			sumbitObj[currentIndex.value] = {
				myvideosource: '',
				score: '',
				questionid: {
					version_id: brushWordsList.value.source_id
				},
				words: wordsDetail.value.words_detail.words,
				symbol: wordsDetail.value.words_detail.symbol,
				pretations: wordsDetail.value.words_detail.pretations
			}
			if (iatRecorder.getScoreObj()) {
				wordsDetail.value.sourceObj = {
					total_score: Math.round(iatRecorder.getScoreObj().total_score),
					accuracy_score: Math.round(iatRecorder.getScoreObj().accuracy_score),
					fluency_score: Math.round(iatRecorder.getScoreObj().fluency_score),
					integrity_score: Math.round(iatRecorder.getScoreObj().integrity_score)
				}

				if (wordsDetail.value.sourceObj.total_score == 0) {
					sourceTimeoutVal.value = setTimeout(() => {
						againRead()
					}, 1000)
					return showToast('录音失败请重读')
				}
				const blob = new Blob(recordedChunks, {
					type: "audio/webm;codecs=opus"
				});
				var file = new File([blob], wordsDetail.value.words_detail.words + Date.now() +
				'.MP3', {
					type: 'audio/x-mpeg',
					lastModified: Date.now()
				});

				let formData = new FormData();
				formData.append('file', file);
				uploadFiles(formData).then(res => {
					wordsDetail.value.video = res.data.fullurl
					sumbitObj[currentIndex.value]['myvideosource'] = res.data.fullurl || ''
					sumbitObj[currentIndex.value]['url'] = res.data.fullurl || ''
				})

				sumbitObj[currentIndex.value]['sourceObj'] = wordsDetail.value.sourceObj
				sumbitObj[currentIndex.value]['mission_id'] = route.query.mission_id || ''
				sumbitObj[currentIndex.value]['score'] = wordsDetail.value.sourceObj.total_score
				sumbitObj[currentIndex.value]['color'] = wordsDetail.value.sourceObj.total_score < 60 ?
					'red' : 60 < wordsDetail.value.sourceObj.total_score && wordsDetail.value.sourceObj
					.total_score < 80 ? 'yellow' : 'green'
				if (currentIndex.value + 1 < brushWordsList.value.resource.length && active.value ===
					2) {
					setTimeout(() => {
						nextWords()
					}, 3000)
				}
			} else {
				showToast('录音失败请重读')
				// tapeClick()
				wordsDetail.value.sourceObj = null
			}
		}, 2000);
	}
	const destroyRecord = async () => {
		// 终止流（这可以让浏览器上正在录音的标志消失掉）
		stream.getTracks().forEach(track => track.stop());
		stream = null;
	}
	const startRecording = async () => {
		const audio = new Audio('https://oss.bigchun.com/file/ding.mp3');
		await audio.play();
		try {
			recordedChunks = []
			stream = await navigator.mediaDevices.getUserMedia({
				audio: true
			});
			mediaRecorder = new MediaRecorder(stream);

			mediaRecorder.addEventListener('dataavailable', event => {
				recordedChunks.push(event.data);
			});

			mediaRecorder.start();
		} catch (error) {
			console.error('获取媒体流错误:', error);
		}
	};

	const stopRecording = async () => {
		wordsDetail.value.recordedChunks = recordedChunks
		mediaRecorder.stop();
	};

	const blobToBase64 = (blob) => {
		return new Promise((resolve, reject) => {
			const reader = new FileReader();
			reader.readAsDataURL(blob);
			reader.onload = () => resolve(reader.result);
			reader.onerror = reject;
		});
	};
	//自动化颜色
	const autoColor = (num) => {
		if (num < 60) {
			return 'autoRed' //#FA192C
		} else if (num > 60 && num < 80) {
			return 'autoYellow' //#FF9917
		} else if (num > 80) {
			return 'autoGreed' //#0CB76C
		}
	}
	const getWordsDetail = () => {
		wordsDetail.value.words_detail = brushWordsList.value.resource[currentIndex.value]
		if (brushWordsList.value.resource[currentIndex.value].wordFile.indexOf('http') === -1) {
			wordsDetail.value.words_detail.wordFile = brushWordsList.value.resmain + wordsDetail.value.words_detail
				.wordFile
		}
		iatRecorder = new IatRecorder({
			text: wordsDetail.value.words_detail.words
		})
		if (thisType === 'follow') { //跟读
			playAudio('word')
		} else { //朗读
			nextTick(async () => {
				tapeClick()
			})
		}
	}
	onMounted(async () => {
		thisType = route.query.type || 'follow'
		const imgUrl = await import('@/assets/phoneticPractice/话筒效果-2.gif')
		playImgSrc.value = imgUrl.default
		const playModule1 = await import('@/assets/images/brushWords/isRecording.gif')
		tapeImgSrc.value = playModule1.default
		const bottomModule = await import('@/assets/phoneticPractice/暂停@3x.png')
		bottomImgSrc.value = bottomModule.default
		if (route.query.id && route.query.apiKey) {
			questions(route.query.apiKey, {
				// resourceFile:route.query.jsonurl,
				// url: '/file/soundmark/res/'
				id: route.query.id,
			}).then(res => {
				brushWordsList.value = res.data
				getWordsDetail()
			})
			return
		}
		brushWordsList.value = JSON.parse(sessionStorage.getItem("soundmark"))
		getWordsDetail()
	})

	var timer = setInterval(async () => {
		time++
	}, 1000)
	onBeforeUnmount(() => {
		clearInterval(timer)
		timer = null
	})
	onUnmounted(() => {
		if (mediaRecorder) {
			stopRecording() //结束录音
		}
		if (iatRecorder) {
			iatRecorder.stop()
		}
		if (myAudio) {
			myAudio.pause()
			myAudio.currenTime = 0
		}
		if (onlyAudio) {
			onlyAudio.pause()
			onlyAudio.currenTime = 0
		}
		clearTimeout(videoTimeoutVal.value)
		clearTimeout(completeTimeoutVal.value)
		clearTimeout(sourceTimeoutVal.value)
	})
</script>

<style lang="scss" scoped>
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		height: 100%;
		font-size: 18px;

		.text {
			margin-left: 10px;
		}
	}

	.circle-container {
		width: 70px;
		/* 容器大小，根据需要调整 */
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-progress {
		width: 100%;
		height: 100%;
	}

	.circle-bg {
		stroke: #FFFFFF;
		/* 背景圆线条颜色 */
	}

	.circle {
		/* 动画定义 */
		animation: progress 5s ease-out forwards;
	}

	.circle1 {
		/* 动画定义 */
		animation: progress 5s ease-out forwards;
	}

	@keyframes progress {
		0% {
			stroke-dashoffset: 100.48;
			/* 初始时，线条完全不可见 */
		}

		100% {
			stroke-dashoffset: 0;
			/* 结束时，线条完全可见 */
		}
	}

	.fillBox {
		height: 100px;
	}

	.practiceBottom {
		position: fixed;
		width: 100%;
		bottom: 0;
		height: 28px;
		background: #E7F8F0;
		color: #0CB76C;
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20px;
		box-sizing: border-box;

		.again,
		.next {
			width: 80px;
			height: 22px;
			line-height: 22px;
			text-align: center;
			border-radius: 18px;
			border: 1px solid #0CB76C;
		}
	}

	.practiceFractionBox {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 0 20px;

		.practiceFraction {
			display: inline-block;
			font-size: 28px;

			img {
				width: 55px;
				height: 12px;
				margin-bottom: 6px;
			}

			.context {
				margin-top: 5px;
				display: flex;
				align-items: center;
				color: #8E8E8E;
				font-size: 12px;

				.lebel {
					margin-right: 6px;
				}
			}
		}
	}


	.practiceButton {
		height: 52px;
		margin-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20px 20px;
		position: fixed;
		width: 100%;
		bottom: 28px;
		box-sizing: border-box;
		background-color: #FFFFFF;

		.wordsVoice {
			flex: 1;
			text-align: center;

			img {
				width: 26px;
				height: 20px;
			}
		}

		.wordsPlay {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;

			img {
				width: 52px;
				height: 52px;
			}
		}

		.myVoice {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;

			img {
				width: 26px;
				height: 26px;
			}
		}

		.practice-button-complete {
			// margin-right: 68px;
			font-size: 16px;
			color: #0CB76C;

		}

		.complete {
			font-size: 16px;
			color: #0CB76C;
		}
	}

	.circle-container1 {
		width: 40px;
		/* 容器大小，根据需要调整 */
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.automaticOverlay {
		width: 345px;
		height: 184px;
		background: #FFFFFF;
		border-radius: 15px;
		color: #333333;
		font-size: 16px;
		line-height: 32px;
		top: 0;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;

		.automaticOverlay-context {
			margin: 30px 20px;
		}

		.automaticOverlay-button {
			margin: 0 20px 30px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}

			div:nth-child(1) {
				border: 1px solid #8E8E8E;
				border-radius: 22.5px;
				font-size: #333333;
			}

			div:nth-child(2) {
				border-radius: 22.5px;
				color: #FFFFFF;
				background: linear-gradient(to left, #29F19C, #02A1F9);
			}
		}

	}

	.wordsDetailBox {
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		overflow: scroll;

		.wordBox {
			padding: 54px 10px 15px;
			display: flex;
			flex-direction: column;

			.progressBox {
				display: flex;
				align-items: center;
				font-size: 16px;
				color: #8E8E8E;

				.active {
					color: #0CB76C;
				}

				.progress {
					flex: 1;
					margin-left: 13px;
					height: 2px;
					background: #E5E5E5;
					border-radius: 1px;
					position: relative;
				}

				.current {
					position: absolute;
					top: 0;
					left: 0;
					height: 2px;
					background: #0CB76C;
					border-radius: 1px;
				}
			}

			.words {
				text-align: center;
				font-size: 32px;
				font-weight: bold;
				color: #333333;
				margin-top: 20px;
			}

			.phoneticSymbol {
				margin-top: 10px;
				text-align: center;
				font-size: 18px;
				color: #8E8E8E;
			}

			.explain {
				margin-top: 10px;
				text-align: center;
				font-size: 14px;
				color: #8E8E8E;
			}

			.title {
				margin-top: 20px;
				text-align: center;
				font-size: 14px;
				color: #8E8E8E;
			}

			.image {
				width: 320px;
				height: 180px;
				margin: 30px auto 0px;
				background: #D8D8D8;
				border-radius: 10px;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.exampleEn,
			.exampleZh {
				text-align: center;
				font-size: 14px;
				color: #8E8E8E;
				margin-top: 10px;
			}
		}
	}

	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}

	.practice-top-switch {

		// width: 72px;
		height: 22px;
		border-radius: 12px;
		font-size: 12px;
		background: #0CB76C;
		display: flex;

		div {
			display: inline-block;
			width: 36px;
			height: 100%;
			color: #FFFFFF;
			text-align: center;
			line-height: 22px;
		}

		.active {
			height: 20px;
			color: #0CB76C;
			border: 1px solid #0CB76C;
			background: #FFFFFF;
			border-radius: 12px;
		}
	}

	.practice-bottom-img {
		width: 18px;
		height: 18px;
	}
</style>